<template>
	<div>
		<HeaderTab>
			<h4 class="headerline" slot="center">原创</h4>
		</HeaderTab>
		<div class="original_box">
			<div id="userPic">
				<img class="Headportrait" :src="img_item?img_item:require('assets/img/Head_portrait/Headportrait.png')" alt="">
			</div>
			<router-link tag="a" to="/uploadExplain">上传说明</router-link>
			<p>用户名称：<span>{{user_name}}</span></p>
			<p>已发布作品：<span>{{original_num}}</span></p>
			<div class="original_but_box">
				<button @click="creationAreaClick">我要创作</button>
			</div>
		</div>
		<div class="original_bookItem">
			<div id="original_bookItem_idstyle" class="original_tag_box">
				<ul>
					<li class="addactive" @click="sendData(Special_Area[0])">{{Special_Area[0]}}</li>
					<li @click="sendData(Special_Area[1])">{{Special_Area[1]}}</li>
					<li @click="sendData(Special_Area[2])">{{Special_Area[2]}}</li>
				</ul>
			</div>
			<div class="original_bookItem_box" v-if="echarts_demo">
				<OriginalBookItem v-for="(item,index) in item_data" :key="index" :Original_items="item"></OriginalBookItem>
			</div>
		</div>
		<proTabBar></proTabBar>
	</div>
</template>

<script>
	import HeaderTab from 'common/HeaderTab/HeaderTab.vue'
	import OriginalBookItem from 'views/DetailsPage/OriginalBookItem'
	import proTabBar from 'components/common/proTabBar.vue'
	
	export default {
		name: 'Original',
		components: {
			HeaderTab,
			OriginalBookItem,
			proTabBar
		},
		data() {
			return {
				img_item: false,
				Special_Area: ['热门','推荐','精选'],
				Original_items: [],
				item_data: [],
				echarts_demo: true,
				user_name: '',
				original_num: ''
			}
		},
		methods: {
			clickStyle() {
				let otbox = document.getElementsByClassName('original_tag_box')[0];
				let nextli = otbox.getElementsByTagName('li');
				
				for (let i = 0; i < nextli.length; i++) {
					nextli[i].onclick = function() {
						for (let j = 0; j < nextli.length; j++) {
							nextli[j].className = '';
						}
						this.className = 'addactive';
					}
				}
			},
			
			// 给标签栏加滚动一定高度后添加导航栏固定样式
			handleScroll() {
				let top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset)
				let m = document.getElementById('original_bookItem_idstyle')
				if(top>=220 && typeof m !== 'undefined' && typeof m !== 'null'){
					document.getElementById('original_bookItem_idstyle').classList.add('original_bookItem_addstyle');
				}else{
					document.getElementById('original_bookItem_idstyle').classList.remove('original_bookItem_addstyle');
				}
			},
		
			// 我要创作按钮跳转效果实现
			creationAreaClick() {
				this.$router.replace('/creationArea');
			},
			
			// 专区按钮点击效果实现
			sendData(e){
				this.echarts_demo = false; //实现组件自行刷新
				this.axios.get('http://192.168.43.169/api/original_item/' + e).then((response) => {
					if(response.data.code == 200){
						this.echarts_demo = true;
						this.item_data = response.data.data;
					}
				})
			},
		
			// 加载用户姓名
			loadUser() {
				this.axios.get('http://192.168.43.169/api/userquery/' + this.$store.state.userid).then((response) => {
					this.user_name = response.data.data[0].username;
					this.original_num = response.data.data[0].original_book;
				});
			},
		},
		created() {
			window.addEventListener('scroll', this.handleScroll, true);
			
			this.axios.get('http://192.168.43.169/api/original_item/' + this.Special_Area[0]).then((response) => {
				if(response.data.code == 200){
					this.item_data = response.data.data;
				}
			})
		},
		destroyed() {
		  window.removeEventListener("scroll", this.handleScroll, true);
		},
		mounted() {
			this.clickStyle();
			this.loadUser();
		}
	}
</script>

<style>
	@import '~assets/css/Original.css';
</style>
